import QtQuick 2.0

DarkSquare {
    id: root
    width: 600
    height: 340

    // A list of easing types
    property variant easings: ["Linear", "InQuad", "OutQuad",
        "InOutQuad", "InCubic", "InSine", "InCirc", "InElastic",
        "InBack", "InBounce"]

    Grid{
        id: container
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: 16
        height: 200
        columns: 5
        spacing: 16
        // iterates over the 'easings' list
        Repeater{
             model: easings
             ClickableImageV2{
                  framed: true
                  text: modelData
                  labelColor: "black"
                  source: "curves/" + modelData + ".png"
                  onClicked:{
                      // set the easing type on the animation
                      anim.easing.type = modelData
                      // restart the animation
                      anim.restart()
                  }
             }
        }
    }

    // The square to be animated
    GreenSquare {
        id: square
        x: 40
        y: 260
    }

    // The animation to test the easing types
    NumberAnimation {
        id: anim
        target: square
        from: 40
        to: root.width - 40 - square.width
        properties: "x"
        duration: 2000
    }

}
